<template>
  <view class="app-container">
    <!-- 启动页背景 -->
    <image class="background" style="z-index: 0" :src="start_img" @click="skip" mode="aspectFill"></image>

    <!-- 跳过按钮 -->
    <view class="skip-box" @click="skip">
      <text class="skip">跳过</text>
      <text class="timer">{{ second }}s</text>
    </view>
  </view>
</template>

<script>
import http from '@/utils/http'

export default {
  data() {
    return {
      timer: null,
      second: 3,
      start_img: '',
    };
  },

  onLoad() {
    this.loadStartImage();
  },

  methods: {
    /**
     * 读取缓存的 GIF 图片
     */
    loadStartImage() {
      const cachedImg = uni.getStorageSync('start_img');

      if (cachedImg) {
        console.log("启动页：从缓存加载 GIF", cachedImg);
        this.start_img = cachedImg;
      } else {
        console.log("启动页：未找到缓存，可能是首次启动");
        this.start_img = http.config.baseURL + '/static/xcx/start.gif'; // 备用方案
      }

      this.startCountdown();
    },

    /**
     * 开始倒计时
     */
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.second > 1) {
          this.second--;
        } else {
          this.skip();
        }
      }, 1000);
    },

    /**
     * 立即跳过
     */
    skip() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      uni.reLaunch({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style lang="scss">
.app-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .background {
    width: 100%;
    height: 100%;
    display: block;
  }

  .skip-box {
    position: fixed;
    top: 180rpx;
    right: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2rpx dashed #fff;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 90rpx;
    height: 90rpx;
    font-size: 26rpx;
  }
}
</style>
